<!--  -->
<template>
  <div class="login-modal">
    <div class="login-bg" @click="closeModal"></div>
    <div class="login_content">
      <div class="login-close" @click="closeModal">X</div>
      <h1>欢迎您来到宠物商城</h1>
      <ul
        v-show="loginWay === 'users'"
        :class="loginWay === 'users' ? 'login-messages' : ''"
      >
        <li>
          手机号：<input type="text" v-model="user.mobile" placeholder="请输入手机号" />
        </li>
        <li>
          密 &nbsp;&nbsp;码：<input
            v-model="user.password"
            type="password"
            placeholder="请输入密码"
          />
        </li>
        <div class="login-div" @click="register">暂无账号，去注册</div>
        <!-- <span class="login-chat" @click="loginWechat">微信登录</span> -->
        <button class="login-btn" @click="login">登录</button>
      </ul>
      <div v-show="loginWay === 'wechat'" id="weixin"></div>
    </div>
  </div>
</template>

<script>
// import { PhoneLoginApi} from '../axios/api'
// import jwtDecode from 'jwt-decode'
import cookie from "js-cookie";
// var jwt = require("jsonwebtoken");
export default {
  name: "Login",
  data() {
    return {
      user: {
        mobile: "",
        password: "",
      },
      // 用户信息
      // 登录方式
      loginWay: "users", //另一个是wechat
    };
  },
  created() {
    this.user.mobile = "";
    this.user.password = "";
  },
  methods: {
    register() {
      this.$store.commit("showRegisterModal");
    },
    closeModal() {
      this.$store.commit("hideLoginModal");
    },
    async login() {
      const { data: res } = await this.$http.post("/dqxmall/userinfo/login", this.user);
      if (res.code === 0) {
        // 登录成功需要存储token
        cookie.set("pet-token", res.token, { domain: "localhost" });
        // 调用接口根据token获取用户信息，为首页显示
        const { data: res1 } = await this.$http.post("/dqxmall/userinfo/info");
        if (res1.msg === "success") {
          // 获取返回的用户信息放到cookie中userInfo1
          cookie.set("userInfo", res1.userInfo, { domain: "localhost" });
          // console.log("res1.userInfo", res1.userInfo);
          this.$store.dispatch("setUserInfo", res1.userInfo);
          // 切换登录状态（heaer组件的登录改为购物车）
          this.$store.commit("changeIsLogin");
          // 然后让登录模块框消失，
          this.$store.commit("hideLoginModal");
          const { data: res } = await this.$http.get("/dqxmall/cart/list");
          if (res.code === 0) {
            // console.log("购物车", res);
            this.$store.dispatch("setShopcarNumber", res.cartVOS.length);
            cookie.set("shopcarNumber", res.cartVOS.length, { domain: "localhost" });
          }
          this.$router.push("/home");
        }
      } else if (res.code === 2002) {
        this.$message.error("登录失败，没这个手机号");
      } else if (res.code === 2003) {
        this.$message.error("登录失败，密码错误");
      }
    },
    // 点击微信登录
    /** 
    loginWechat(){
      // 改变登录方式
      this.loginWay = "wechat";
      let _this = this;
      new WxLogin({
          id: "weixin",
          appid: "wx67cfaf9e3ad31a0d",  // 这个appid要填死
          scope: "snsapi_login",
          // 扫码成功后重定向的接口
          redirect_uri: "https://sc.wolfcode.cn/cms/wechatUsers/shop/PC",
          // state填写编码后的url
          state: encodeURIComponent(window.btoa(process.env.VUE_APP_STATE_URL + _this.$route.path)),
          // 调用样式文件
          href: "data:text/css;base64,Lyogd3hsb2dpbi5jc3MgIOebrueahOaYr+iuqeS6jOe7tOeggeeahOS4iuS4i+aPkOekuuS/oeaBr+a2iOWksSovDQouaW1wb3dlckJveCAudGl0bGUsIC5pbXBvd2VyQm94IC5pbmZvew0KICBkaXNwbGF5OiBub25lOw0KfQ0KDQouaW1wb3dlckJveCAucXJjb2Rlew0KICBtYXJnaW4tdG9wOiAyMHB4Ow0KfQ==",
      });
        //显示微信二维码
    }
    */
  },
};
</script>
<style lang="less" scoped>
.login-modal {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 10;
  .login-bg {
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .login_content {
    position: absolute;
    height: 300px;
    width: 400px;
    top: 50%;
    left: 50%;
    margin-left: -200px;
    margin-top: -150px;
    border-radius: 20px;
    padding: 20px;
    background-color: white;
    .login-close {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 20px;
      cursor: pointer;
    }
    h1 {
      text-align: center;
      font-weight: 700;
      font-size: 30px;
      margin-bottom: 40px;
    }
    .login-messages {
      margin: 20px;
      font-size: 20px;
      li {
        height: 50px;
        input {
          height: 30px;
          width: 250px;
          padding-left: 10px;
          border: 1px solid #ccc;
          outline: none;
        }
      }
      .login-div {
        float: left;
        height: 30px;
        width: 200px;
        font-size: 15px;
        cursor: pointer;
      }
      .login-chat {
        float: right;
        color: white;
        cursor: pointer;
        border-radius: 5px;
        font-size: 15px;
        padding: 5px;
        margin-right: 30px;
        background-color: rgb(41, 115, 233);
      }
      .login-btn {
        height: 50px;
        width: 96%;
        color: white;
        cursor: pointer;
        border-radius: 8px;
        margin: 20px 0;
        border: 1px solid #ccc;
        background-color: rgb(41, 115, 233);
        outline: none !important;
        font-size: 30px;
      }
    }
  }
}
// 微信二维码样式
#weixin {
  width: 300px;
  height: 250px;
  margin: auto;
}
</style>
